<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page pageEncoding="utf-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新青年宠物销售平台</title>

    <%@include file="../common/header.jsp"%>
    <style>
        body {
            display: flex;
            flex-wrap: wrap;
        }
        .coupon-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /* Add any additional styles for spacing between coupons */
            gap: 1rem;
        }
        .coupon-get {
            /* ...existing styles... */
            text-align: center;
        }
        .coupon {
            display: inline-flex;
            color: white;
            position: relative;
            padding-left: .5rem;
            padding-right: .5rem;
            margin: 1rem;
            /** 弧度得用rem来计数，不能用%号，因为%是用来计数高度和宽度的 */
            border-top-right-radius: .3rem;
            border-bottom-right-radius: .3rem;
            overflow: hidden;
        }
        .coupon-yellow {
            background-color: #F39B00;
        }
        .coupon-yellow-gradient {
            background-image: linear-gradient(150deg, #F39B00 50%, #F39B00D8 50%);
        }
        .coupon-red-gradient {
            background-image: linear-gradient(150deg, #D24161 50%, #D24161D8 50%);
        }
        .coupon-green-gradient {
            background-image: linear-gradient(150deg, #7EAB1E 50%, #7EAB1ED8 50%);
        }
        .coupon-blue-gradient {
            background-image: linear-gradient(150deg, #50ADD3 50%, #50ADD3D8 50%);
        }
        /** 左边框波浪 **/
        .coupon-wave-left::before, .coupon-wave-right::after{
            content: '';
            position: absolute;
            top: 0;
            height: 100%;
            width: 14px;
            background-image: radial-gradient(white 0, white 4px, transparent 4px);
            /** 若只设置为r（半径）的两倍(直径)，则半圆之间没有类似堤岸的间隔 */
            background-size: 14px 14px;
            background-position: 0 2px;
            background-repeat: repeat-y;
            z-index: 1;
        }
        .coupon-wave-left::before {
            left: -7px;
        }
        .coupon-wave-right::after {
            right: -7px;
        }
        .coupon-info {
            padding-left: 1rem;
            padding-right: 1rem;
            padding-top: 1rem;
            padding-bottom: 1.5rem;
            position: relative;
            min-width: 15rem;
        }
        .coupon-info-right-dashed {
            border-right: 2px dashed white;
        }
        .coupon-info-right-solid {
            border-right: 2px solid white;
        }
        /** 使用两个边框为圆角的白色div制造半圆缺角，有个缺点是这个缺角必须与背景色相同（clip-path不好使用） **/
        .coupon-hole::before, .coupon-hole::after {
            content: '';
            width: 1rem;
            height: 1rem;
            background-color: white;
            border-radius: 50%;
            position: absolute;
            right: -.5rem;
        }
        .coupon-info::before {
            top: -.5rem;
        }
        .coupon-info::after {
            bottom: -.5rem;
        }
        .coupon-info>div {
            margin-bottom: .2rem;
        }
        .coupon-price {
            font-size: 250%;
            font-weight: bold;
        }
        .coupon-price>span {
            font-size: 40%;
            margin-left: .5rem;
            font-weight: normal;
        }
        .coupon-get {
            padding: 1rem;
            /** 这里使用flex是为了让文字居中 */
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            min-width: 5rem;
            position: relative;
        }
        .coupon-get>.coupon-desc {
            font-size: 150%;
            margin-bottom: .5rem;
            font-weight: bold;
        }
        .coupon-get-already::after {
            content: '';
            width: 5rem;
            height: 5rem;
            background-size: 5rem 5rem;
            background-image: url('');
            position: absolute;
            top: -1rem;
            right: -1rem;
        }
    </style>
</head>
<body>
<jsp:include page="../common/nav.jsp">
    <jsp:param name="backgroud" value="/img/pet/top-dog-1.jpg"/>
</jsp:include>
<div class="main">

    <nav>
        <ol itemscope="" itemtype="https://schema.org/BreadcrumbList" class="breadcrumb">
            <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
                <a itemprop="item" href="${pageContext.request.contextPath}/index.action">
                    <span itemprop="name">首页</span>
                </a>
                <meta itemprop="position" content="1">
            </li>
            <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="active">
                <span itemprop="name">购物券中心</span>
                <meta itemprop="position" content="2">
            </li>
        </ol>
    </nav>

    <div class="text-center">
        
    <div class="coupon coupon-wave-left coupon-wave-right coupon-yellow-gradient">
        <div class="coupon-info coupon-info-right-dashed">
            <div class="coupon-store">新青年宠物店</div>
            <div class="coupon-price">&yen;5.00<span>优惠券</span></div>
            <div class="coupon-description">订单满50.00元</div>
        </div>
        <div class="coupon-get">
            <div class="coupon-desc"><button  style="color: red;"  name="pet-detail" class="btn btn-coo-blue btn-tooltip" role="button" data-toggle="tooltip" data-placement="right" title="" data-original-title="Let's search" onclick="window.location.href=''"  >领取</button></div>
            <div class="coupon-expiry-date">2024.7.15<br/>2024.7.30</div>
        </div>
    </div>

    <div class="coupon coupon-wave-left coupon-wave-right coupon-red-gradient">
        <div class="coupon-info coupon-info-right-dashed">
            <div class="coupon-store">新青年宠物店</div>
            <div class="coupon-price">&yen;10.00<span>优惠券</span></div>
            <div class="coupon-description">订单满100.00元</div>
        </div>
        <div class="coupon-get">
            <div class="coupon-desc"><button style="color: red;"   name="pet-detail" class="btn btn-coo-blue btn-tooltip" role="button" data-toggle="tooltip" data-placement="right" title="" data-original-title="Let's search" onclick="window.location.href=''"  >领取</button></div>
            <div class="coupon-expiry-date">2024.7.15<br/>2024.7.30</div>
        </div>
    </div>

    <div class="coupon coupon-wave-left coupon-wave-right coupon-green-gradient">
        <div class="coupon-info coupon-info-right-dashed">
            <div class="coupon-store">新青年宠物店</div>
            <div class="coupon-price">&yen;20.00<span>优惠券</span></div>
            <div class="coupon-description">订单满200.00元</div>
        </div>
        <div class="coupon-get">
            <div class="coupon-desc"><button  style="color: red;"  name="pet-detail" class="btn btn-coo-blue btn-tooltip" role="button" data-toggle="tooltip" data-placement="right" title="" data-original-title="Let's search" onclick="window.location.href=''"  >领取</button></div>
            <div class="coupon-expiry-date">2024.7.15<br/>2024.7.30</div>
        </div>
    </div>

    <div class="coupon coupon-wave-left coupon-wave-right coupon-blue-gradient">
        <div class="coupon-info coupon-info-right-dashed">
            <div class="coupon-store">新青年宠物店</div>
            <div class="coupon-price">&yen;50.00<span>优惠券</span></div>
            <div class="coupon-description">订单满300.00元</div>
        </div>
        <div class="coupon-get">
            <div class="coupon-desc"><button  style="color: red;"  name="pet-detail" class="btn btn-coo-blue btn-tooltip" role="button" data-toggle="tooltip" data-placement="right" title="" data-original-title="Let's search" onclick="window.location.href=''"  >领取</button></div>
            <div class="coupon-expiry-date">2024.7.15<br/>2024.7.30</div>
        </div>
    </div>
        <div class="coupon coupon-wave-left coupon-wave-right coupon-blue-gradient">
            <div class="coupon-info coupon-info-right-dashed">
                <div class="coupon-store">新青年宠物店</div>
                <div class="coupon-price">&yen;100.00<span>优惠券</span></div>
                <div class="coupon-description">订单满400.00元</div>
            </div>
            <div class="coupon-get">
                <div class="coupon-desc"><button  style="color: red;"  name="pet-detail" class="btn btn-coo-blue btn-tooltip" role="button" data-toggle="tooltip" data-placement="right" title="" data-original-title="Let's search" onclick="window.location.href=''"  >领取</button></div>
                <div class="coupon-expiry-date">2024.7.15<br/>2024.7.30</div>
            </div>
        </div>
        <div class="coupon coupon-wave-left coupon-wave-right coupon-blue-gradient">
            <div class="coupon-info coupon-info-right-dashed">
                <div class="coupon-store">新青年宠物店</div>
                <div class="coupon-price">&yen;150.00<span>优惠券</span></div>
                <div class="coupon-description">订单满500.00元</div>
            </div>
            <div class="coupon-get">
                <div class="coupon-desc"><button  style="color: red;"  name="pet-detail" class="btn btn-coo-blue btn-tooltip" role="button" data-toggle="tooltip" data-placement="right" title="" data-original-title="Let's search" onclick="window.location.href=''"  >领取</button></div>
                <div class="coupon-expiry-date">2024.7.15<br/>2024.7.30</div>
            </div>
        </div>
        <div class="coupon coupon-wave-left coupon-wave-right coupon-blue-gradient">
            <div class="coupon-info coupon-info-right-dashed">
                <div class="coupon-store">新青年宠物店</div>
                <div class="coupon-price">&yen;200.00<span>优惠券</span></div>
                <div class="coupon-description">订单满600.00元</div>
            </div>
            <div class="coupon-get">
                <div class="coupon-desc"><button style="color: red;"  name="pet-detail" class="btn btn-coo-blue btn-tooltip" role="button" data-toggle="tooltip" data-placement="right" title="" data-original-title="Let's search" onclick="window.location.href=''"  >领取</button></div>
                <div class="coupon-expiry-date">2024.7.15<br/>2024.7.30</div>
            </div>
        </div>

    <div class="text-center">
    <p class="coo-text-brown">店长不定时发放优惠券，欢迎来抢！！！。</p>
    <div class="space-30"></div>
    <button name="others" onclick="window.location.href='${pageContext.request.contextPath}/index.action'" class="btn btn-fill btn-coo-pink btn-tooltip" data-toggle="tooltip" data-placement="top" title="" data-original-title="back to the search page">回到首页</button>
    <div class="space-30"></div>
</div>
</div>
</div>
<%@include file="../common/footer.jsp"%>
<%@include file="../common/js.jsp"%>
<script type="text/javascript">

    function domById(id) {
        return document.getElementById(id);
    }
    getRandomId = function () {
        return 'id'.concat(Math.floor((Math.random() * 10000000000000000)).toString());
    };
    getCurrentTime = function () {
        return new Date().toLocaleString();
    };

    var curArr = null;

    var commentList = [];

    window.onload = function (ev) {
        // the function will be called at first while page loads
        initTreeComment();
        loadEmoji();
    };

    function loadEmoji() {
        const dom = domById('emoji_board');
        // &#128540;
        const fragment = document.createDocumentFragment();
        let num = 128512;
        for (let i = 0; i < 6; ++i) {
            const p = document.createElement('p');
            p.className = 'emoji_row';
            const pf = document.createDocumentFragment();
            for (let j = 0; j < 9; ++j) {
                const span = document.createElement('span');
                span.className = 'emoji_item'
                span.innerHTML = '&#' + num + ';';
                span.onclick = function () {
                    setEmojiToContent(this.innerText);
                }
                pf.append(span);
                ++num;
            }
            p.appendChild(pf);
            fragment.append(p);
        }
        dom.appendChild(fragment);
    }

    function setEmojiToContent(emo) {
        domById('comment_space').value += emo;
    }

    function emojiTrigger(ev) {
        ev.stopPropagation();
        const dom = domById('emoji_board');
        const block = dom.style.display;
        if (block === 'block') {
            dom.style.display = 'none';
        } else {
            dom.style.display = 'block';
        }
    }

    function login() {
        const commentator = domById('commentator').value.trim();
        if (commentator.length > 0) {
            domById('role_info_name').innerText = commentator;
        }
        initTreeComment();
    }

    /**
     * 初始化评论模块
     */
    initTreeComment = function () {
        const commentView = domById('comment_view');
        if (commentList.length === 0) {
            noComment(commentView)
        } else {
            haveComment(commentView, commentList)
        }
    };

    noComment = function (commentView) {
        commentView.style.textAlign = 'center';
        commentView.innerText = ''
    };

    /**
     * 点击 “提交” 按钮调用的函数
     * @param ev
     */
    function submitTree (ev) {
        const textareaEle = domById('comment_space');
        ev.stopPropagation();
        const text = textareaEle.value;
        const commentator = domById('role_info_name').innerText;

        if (text.length === 0 || commentator === '请先设置您想留言的昵称') {
            alarmIfEmpSpace();
            return;
        }

        let plcHolder = textareaEle.placeholder;

        if(plcHolder.charAt(0) === '回') {
            plcHolder = plcHolder.substring(plcHolder.indexOf(' ') + 1, plcHolder.length)
        } else {
            curArr = commentList;
            plcHolder = "anonymous";
        }

        if (commentator === plcHolder) {
            cancelReply(event, domById('cancel_reply'));
            alert("你不能评论或回复自己!");
            return;
        }

        /*
        * hash表用于保存当前评论的点赞角色名称，默认值位 false
        * */
        const admirers = new Map();
        admirers.set(commentator, false);
        const commentTree = {
            id: getRandomId(),
            commentator: commentator,
            author: plcHolder,
            comment: text,
            time: getCurrentTime(),
            thumbUp: 0,
            admirers: admirers,
            reply: []
        };
        curArr.push(commentTree);
        initTreeComment();
        curArr = null;
        cancelReply(event, domById('cancel_reply'));
    }

    alarmIfEmpSpace = function () {
        alert("The comment content or name are empty！")
    };

    /**
     * 取消回复
     * @param ev 事件
     * @param th 回复按钮自身的 DOM 属性
     */
    function cancelReply (ev, th) {
        ev.stopPropagation();
        th.style.display = 'none';
        domById('comment_space').value = "";
        countTextareaLength();
        fillPlaceholderOfCommentSpace("请输入您要评论的内容");
    }

    /**
     * 计算输入框的内容长度
     */
    function countTextareaLength () {
        const space = domById('comment_space');
        document.getElementById('char_count').innerText = (1000 - space.value.length).toString();
    }

    /**
     * 输入框触发按键事件，并执行相关操作，比如记录输入内容的长度
     * @param ev 事件
     */
    function readKey (ev) {
        const space = domById('comment_space'), len = space.value.length;
        document.getElementById('char_count').innerText = (1000 - len).toString();
        handleCancelButton(space, len > 0 ? 'inline-block' : 'none')
    }

    function handleCancelButton (textArea, status) {
        domById('cancel_reply').style.display = status;
    }

    /**
     * 评论加载
     * @param commentView
     * @param arr
     */
    haveComment = function (commentView, arr) {

        commentView.style.textAlign = 'left';

        let htmlText = '';
        arr.forEach(function (value) {
            htmlText +=
                `<ul id="\${value.id}" class="comment_ulist" style="">`+
                `  <li class="comment_line_box" id="\${value.id.substring(0, 6)}">` +
                `    <div class="cmt_img">` +
                `    </div>` +
                `    <div class="cmt_info">` +
                `      <a class="commentator">\${value.commentator}</a>` +
                `      <span class="time">\${value.time}</span>` +
                `   </div>` +
                `   <div class="cmt_reply">` +
                `       <span id="\${value.id.substring(0, 9)}">` +
                `           <a class="cmt_reply_btn" id="\${value.id.substring(0, 7)}">回复</a>` +
                `       </span>`;

            if(value.reply.length > 0) {
                htmlText += `<a id="\${value.id.substring(0, 8)}" class="cmt_reply_checker">查看回复(\${value.reply.length})</a>`
            }
            // 初始化当前角色是否给该条留言点赞了
            const commentator = domById('role_info_name').innerText;
            const isAdmirer = value.admirers.get(commentator);
            let color = 'rgba(0,0,0,0.9)';
            if (!isAdmirer) {
                color = 'rgba(0,0,0,0.4)';
            }
            htmlText += "" +
                `   <span>` +
                `       <a style="color:\${color}" id="\${value.id.substring(0, 10)}" class="thumb_up">\${(value.thumbUp > 0 ? value.thumbUp : "")}</a>` +
                `   </span>` +
                `</div>`;
            htmlText += ` <div style="display: block; margin-top: 8px" class="comment">\${value.comment}</div>`;
            htmlText += `</li></ul>`;
        });

        commentView.innerHTML = htmlText;

        showButton(arr, 1)
    };

    function thumbUp(value) {
        const dom = domById(value.id.substring(0, 10));
        dom.onclick = function (ev) {
            const cnt = value.thumbUp;
            const commentator = domById('role_info_name').innerText;
            const isAdmired = value.admirers.get(commentator);
            if (!value.admirers.has(commentator)) {
                value.admirers.set(commentator, false);
            }
            if (isAdmired) {
                value.thumbUp -= 1;
                dom.innerText = value.thumbUp === 0 ? '' : (cnt - 1).toString();
                dom.style.color = 'rgba(0,0,0,0.4)';
            } else {
                value.thumbUp += 1;
                dom.innerText = value.thumbUp.toString();
                dom.style.color = 'rgba(0,0,0,0.9)';
            }
            value.admirers.set(commentator, !isAdmired);
            // TODO 发送请求到后端，并更新数据库
            /**
             * @Tip 这里需要注意一点，点赞功能会存在恶意点击的情况，就是用户对当前评论频繁且快速点赞或取消点赞，如果每次点击我们都请求后端更新数据
             * 那么势必会影响服务器的性能，因此我们需要避免这一点，这里不做解释，大家有兴趣可以评论区留言探讨
             */
        }
    }

    showButton = function (arr, sign) {

        arr.forEach(function (value) {

            const parent = domById(value.id);
            const broEle = domById(value.id.substring(0, 6));

            const reply = domById(value.id.substring(0, 7));

            broEle.onmouseover = function (ev) {
                reply.style.display = 'inline-block';
            };

            thumbUp(value);

            reply.onclick = function (ev) {
                ev.stopPropagation();
                curArr = sign === 1 ? value.reply : arr;
                domById('cancel_reply').style.display = 'inline-block';
                const str = "回复 ".concat(value.commentator);
                fillPlaceholderOfCommentSpace(str)
            };

            const replyLen = value.reply.length;
            if (replyLen > 0) {
                handleReply(replyLen, value, broEle, parent);
            }

            broEle.onmouseleave = function (ev) {
                reply.style.display = 'none'
            };
        });
    };

    function handleReply(len, value, broEle, parent) {
        const checkReply = domById(value.id.substring(0, 8));
        checkReply.onclick = (ev) => {
            ev.stopPropagation();
            if(checkReply.innerText.trim().charAt(0) === '查'){
                ifHaveReply(parent, value.reply, broEle);
                checkReply.innerText = "收起回复";
            } else {
                toggleBackReplies(parent);
                checkReply.innerText = "查看回复("+ len +")";
            }
        };
    }

    toggleBackReplies = function (parentTag) {
        const nodes = parentTag.childNodes;
        parentTag.removeChild(nodes[nodes.length - 1]);
    };

    ifHaveReply = function (parentTag, arr, broEle) {
        const li = document.createElement("li");
        li.className = "reply_list";
        li.style.marginLeft = '42px';
        li.style.borderLeft = 'solid 5px lightgray';

        let htmlText = '<ul class="comment_ulist">';

        arr.forEach(function (value) {
            // 初始化当前角色是否给该条留言点赞了
            const commentator = domById('role_info_name').innerText;
            const isAdmirer = value.admirers.get(commentator);
            let color = 'rgba(0,0,0,0.9)';
            if (!isAdmirer) {
                color = 'rgba(0,0,0,0.4)';
            }

            htmlText +=
                `<li class="comment_line_box" id="\${value.id.substring(0, 6)}">` +
                `   <div class="cmt_img" style="margin-left: 10px">` +
                `   </div>` +
                `   <div class="cmt_info">` +
                `       <a class="commentator">\${value.commentator}</a>` +
                `       <span>回复</span>` +
                `       <a class="author">\${value.author}</a>` +
                `       <span class="time">\${value.time}</span>` +
                `   </div>` +
                `   <div class="cmt_reply">` +
                `       <span id="\${value.id.substring(0, 9)}">` +
                `           <a class="cmt_reply_btn" id="\${value.id.substring(0, 7)}">回复</a>` +
                `       </span>` +
                `       <span>` +
                `           <a style="color:\${color}" id="\${value.id.substring(0, 10)}" class="thumb_up">\${(value.thumbUp > 0 ? value.thumbUp : "")}</a>` +
                `       </span>` +
                `   </div>` +
                `   <div class="comment">\${value.comment}</div>` +
                `</li>`;
        });
        htmlText += '</ul>';
        li.innerHTML = htmlText;
        parentTag.insertBefore(li, broEle.nextSibling);
        showButton(arr, 2)
    };

    fillPlaceholderOfCommentSpace = function (str) {
        document.getElementById('comment_space').placeholder = str
    };

    mainCLick = function (ev) {
        ev.stopPropagation();
        domById('emoji_board').style.display = 'none';
    };

    function len(id) {
        return domById(id).value.trim().length;
    }


</script>
</body>
</html>